﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
        <!--编辑器组件-->
<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/uuid.js"></script>
        

	</head>

	<body>
       
        <form class="layui-form layui-form-pane" action="" method="post">
            <div class="container-fluid">
                <div class="row-fluid">
                    <fieldset class="layui-elem-field" style="width:99%;">
                        <legend style="font-size:13pt;">基本信息</legend>
                        <div class="layui-field-box">
                            <div class="layui-form-item">
                                <label class="layui-form-label">新闻标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" value="" lay-verify="" autocomplete="off" placeholder="请输入网站标题" class="layui-input">
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend style="font-size:11pt;">SEO</legend>
                            </fieldset>
                            <div class="layui-form-item">
                                <label class="layui-form-label">关键字</label>
                                <div class="layui-input-block">
                                    <input type="text" name="keywords" value="" lay-verify="" autocomplete="off" placeholder="请输入关键字" class="layui-input">
                                </div>
                            </div>
                            <!--required-->
                            <div class="layui-form-item">
                                <label class="layui-form-label">描述</label>
                                <div class="layui-input-block">
                                    <input type="text" name="abstract" value="" lay-verify="" autocomplete="off" placeholder="请输入描述" class="layui-input">
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend style="font-size:11pt;">SEO</legend>
                            </fieldset>
                            <div class="layui-form-item">
                                <label class="layui-form-label">所属分类</label>
                                <div class="layui-input-block">
                                    <select name="classname" id="classname" lay-verify="">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图片上传</label>
                                <input type="text" name="imagelist" id="imagelist" style="display:none;" value="null" class="layui-input">
                                <div class="layui-input-block">
                                    <!--<input type="text" name="title" value="" lay-verify="required" autocomplete="off" placeholder="请输入菜单标题" class="layui-input">-->
                                    <div class="layui-btn-group">
                                        <input type="button" class="layui-btn layui-btn-primary" id="J_selectImage" value="上传图片" style="">
                                        <input type="button" class="layui-btn layui-btn-primary" id="J_addImage" value="追加图片" style="">
                                    </div>
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend style="font-size:11pt;">图片列表</legend>
                            </fieldset>

                            <div class="layui-form-item DragList">
                                <div class="gridly">
                                    <div class="brick small" id="0" style="position: absolute; left: 0px; top: 0px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="0" name="p0" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="1" style="position: absolute; left: 128px; top: 0px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="1" name="p1" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="2" style="position: absolute; left: 128px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;;" index="2" name="p2" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="3" style="position: absolute; left: 256px; top: 0px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="3" name="p3" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="4" style="position: absolute; left: 0px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="4" name="p4" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="5" style="position: absolute; left: 0px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="5" name="p5" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="6" style="position: absolute; left: 0px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;;" index="6" name="p6" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="7" style="position: absolute; left: 0px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="7" name="p7" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="8" style="position: absolute; left: 0px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="8" name="p8" src="img/empty.png" />
                                    </div>
                                    <div class="brick small" id="9" style="position: absolute; left: 0px; top: 128px;">
                                        <a class="delete" href="#">×</a>
                                        <img style="width:120px;height:120px;" index="9" name="p9" src="img/empty.png" />
                                    </div>
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend style="font-size:11pt;">新闻内容</legend>
                            </fieldset>
                            <div class="layui-form-item">
                                <textarea id="content1" name="content1" cols="100" rows="21" style="visibility:hidden;width:100%;" placeholder="内容 / Content"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sort" value="0" lay-verify="" autocomplete="off" placeholder="请输入排序" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="state" value="1" title="开启">
                                    <input type="radio" name="state" value="0" title="关闭" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                </div>
            </div>
        </form>





		<script type="text/javascript" src="plugins/layui/layui.js"></script>
        <script src="ajax/main.js"></script>
        <!--编辑器组件-->
        <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
        <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
        <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
        <!--图片上传组件-->
        <link href="css/jquery.gridly.css" rel="stylesheet" />
        <link href="css/custom_gridly.css" rel="stylesheet" />
        <script src="plugins/jquery.gridly.js"></script>
        <script src="plugins/custom_gridly.js"></script>
        <script>
            var editor;
            $.initPicJson.init("gridly");
            CJPlugin.initKindEditor("content1", "J_selectImage", "gridly");
            var Array_id = new Array("classname", "time");
            CJPlugin.loadClass("classname", "GetValue.ashx", Array_id, "productsclass");
            $(document).ready(function () {    
                $('.gridly').gridly({
                    base: 60, // px 
                    gutter: 10, // px
                    columns: 10
                });
                layui.use(['form'], function () {
                    var form = layui.form()
                    , layer = layui.layer;

                    //自定义验证规则
                    form.verify({
                        title: function (value) {
                            if (value.length < 5) {
                                return '标题至少得5个字符啊';
                            }
                        }
                      , pass: [/(.+){6,12}$/, '密码必须6到12位']
                      , content: function (value) {
                          layedit.sync(editIndex);
                      }
                    });
                    //提交
                    form.on('submit(demo1)', function (data) {
                        var field_id = new Array("id", "ImageList", "classname", "Title", "Content", "keywords", "abstract", "sort", "state", "time");
                        var val = "'" + uuid(6, 16) + "','" + data.field.imagelist + "','"
                            + data.field.classname + "','" + data.field.title + "','"
                            + data.field.content1 + "','" + data.field.keywords + "','"
                            + data.field.abstract + "','" + data.field.sort + "','"
                            + data.field.state + "','" + CJPlugin.getTime()+"'";
                        CJPlugin.execute("products", val, "insert", "ExecuteHandler", field_id);
                        //layer.alert(JSON.stringify(data.field.state), {
                        //    title: '最终的提交信息'
                        //})
                        return false;
                    });
                });
            });
                 
        </script>
	</body>

</html>